<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
引入這串就能使用google的JQuery CDN，記得一定要放在head裡讓他優先載入。
$(document).ready(function(){
//JQuery code
});
JQuery寫在ready event裡。也可以寫成...
$(function(){
// jQuery methods go here...
});
程式碼:
JQuery語法以"$(目標物).action()"為基本語法。看到"$"很可能就是JQuery。然後以下只講和上一篇JavaScript不一樣的點。
//javaScript
var collegeSelect=document.getElementById("college-list");
collegeSelect.innerHTML=inner;
//JQuery
$("#college-list").html(inner)
javaScript要document.getElementById(id);抓到元素後還要innerHTML才可以丟inner字串進去改裡面的值。JQuery只要$(id)抓元素.html(要丟的值)就完成，簡短了很多。
//javaScript
<body>
...
<select id="college-list" onchange="changeCollege(this.selectedIndex)"></select>
...
</body>
<script>
function changeCollege(index){
var Sinner="";
for(var i=0;i<sectors[index].length;i++){
Sinner=Sinner+'<option value=i>'+sectors[index][i]+'</option>';
}
var sectorSelect=document.getElementById("sector-list");
sectorSelect.innerHTML=Sinner;
}
changeCollege(document.getElementById("college-list").selectedIndex);
</script>
javaScript還要在"college-list"這select裡加onchange時呼叫某function。且還要使用
var sectorSelect=document.getElementById("sector-list");
sectorSelect.innerHTML=Sinner;
來丟Sinner進去sector-list的select裡面
//JQuery
$("#college-list").change(function(){
index=this.selectedIndex;
var Sinner="";
for(var i=0;i<sectors[index].length;i++){
Sinner=Sinner+'<option value=i>'+sectors[index][i]+'</option>';
}
$("#sector-list").html(Sinner);
});
JQuery只要透過"#college-list"抓到"college-list"這id('#'抓id '.'抓class 都不加抓xml元素 跟css一樣)就可以直接change的方法。this就是抓到的元素自己，.selectedIndex目前選到的項目。
$("#sector-list").html(Sinner);直接用.html給值。
//javaScript
changeCollege(document.getElementById("college-list").selectedIndex);
//JQuery
$("#college-list").change();
最後呼叫一次change方法。javaScript又要呼叫changeCollege，又要抓用document抓項目給參數。JQuery只要$("#college-list").change();抓到"college-list"這id在呼叫change()方法就結束了。
今天終於撐到第五天了，每天都要花一小時打字好耗時間阿XDD
想請問一下在IE8下，出現"SCRIPT5007: 無法取得未定義或 Null 參考的屬性 'length'"該如何解決 謝謝
我用IE 11測沒出現這狀況，可能考慮重裝或使用其他瀏覽器試試看?
iThome鐵人賽
看影片追技術